<template>
  <el-container class="captcha-box">
    <el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="loadCaptcha" plain>
      {{ btnText }}
    </el-button>

    <el-dialog
        v-model="showCaptcha"
        :close-on-click-modal="true"
        :show-close="false"
        style="width: 360px;"
    >
      <captcha-letter
        :image-url="imageUrl"
        @handle-refresh="handleRequestCaptCode"
        @handle-confirm="handleConfirmVerification"
      />
    </el-dialog>
  </el-container>
</template>

<script setup>
// 发送短信验证码组件
import {ref} from "vue";
import lodash from 'lodash'
import {validateEmail, validateMobile} from "@/utils/validate";
import {httpGet, httpPost, httpGetCaptcha} from "@/utils/http";
import CaptchaLetter from "@/components/CaptchaLetter.vue";
import {isMobile} from "@/utils/libs";
import {showMessageError, showMessageOK} from "@/utils/dialog";

// eslint-disable-next-line no-undef
const props = defineProps({
  receiver: String,
  size: String,
  sedtype: String
});
const btnText = ref('发送验证码')
const canSend = ref(true)
const showCaptcha = ref(false)
const captKey = ref('')
const dots = ref(null)

const imageUrl = ref('')
const imageKey = ref('')

const handleRequestCaptCode = () => {
  httpGetCaptcha('/api/captcha/bfresource_platform/refresh/').then(res => {
    const data = res.data
    // imageUrl.value = "http://211.153.113.182:80" + data.image_url
    imageUrl.value = data.image_url
    imageKey.value = data.key
  }).catch(e => {
    showMessageError('获取人机验证数据失败：' + e.message)
  })
}

function handleConfirmVerification(inputcode) {
  if (!inputcode) {
    return showMessageError('请进行人机验证再操作')
  }

  httpPost('/api/captcha/check', {
    key: imageKey.value,
    text: inputcode
  }).then(() => {
    // ElMessage.success('人机验证成功')
    showCaptcha.value = false
    sendMsg()
  }).catch(() => {
    showMessageError('人机验证失败')
    handleRequestCaptCode()
  })
}

const loadCaptcha = () => {
  if (!validateMobile(props.receiver) && !validateEmail(props.receiver)) {
    return showMessageError("请输入合法的手机号")
  }

  if (props.sedtype === 'regapi') {
    httpPost('/api/captcha/checkuser', {receiver: props.receiver}).then(res => {
      showCaptcha.value = true
      // 手机用滑动验证码
      if (isMobile()) {
        getSlideCaptcha()
      } else {
        handleRequestCaptCode()
      }
    }).catch(e => {
      showMessageError('该用户名已经被注册: ' + props.receiver)
    })
  } else {
    showCaptcha.value = true
    // 手机用滑动验证码
    if (isMobile()) {
      getSlideCaptcha()
    } else {
      handleRequestCaptCode()
    }
  }
}

const sendMsg = () => {
  if (!canSend.value) {
    return
  }

  canSend.value = false
  httpPost('/api/sms/code', {receiver: props.receiver, key: captKey.value, dots: dots.value}).then(() => {
    showMessageOK('验证码发送成功')
    let time = 120
    btnText.value = time
    const handler = setInterval(() => {
      time = time - 1
      if (time <= 0) {
        clearInterval(handler)
        btnText.value = '重新发送'
        canSend.value = true
      } else {
        btnText.value = time
      }
    }, 1000)
  }).catch(e => {
    canSend.value = true
    showMessageError('验证码发送失败：' + e.message)
  })
}

// 滑动验证码
const bgImg = ref('')
const bkImg = ref('')
const result = ref(0)

const getSlideCaptcha = () => {
  result.value = 0
  httpGet("/api/captcha/slide/get").then(res => {
    bkImg.value = res.data.bkImg
    bgImg.value = res.data.bgImg
    captKey.value = res.data.key
  }).catch(e => {
    showMessageError('获取人机验证数据失败：' + e.message)
  })
}

const handleSlideConfirm = (x) => {
  httpPost("/api/captcha/slide/check", {
    key: captKey.value,
    x: x
  }).then(() => {
    result.value = 1
    showCaptcha.value = false
    sendMsg()
  }).catch(() => {
    result.value = 2
  })
}
</script>

<style lang="stylus">

.captcha-box {
  .send-btn {
    width: 100%;
  }

  .el-button--large {
    padding 24px 19px
    border-radius 10px
  }

  .el-dialog {
    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__body {
      padding 0
    }
  }
}
</style>
